<template>
  <div class="p_management">
    <div class="container">
      <div class="container_title" style="margin-bottom: 0">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">商品管理</span>
      </div>
      <div class="container_content">
        <Tabs :value="tabName">
          <Tab-pane
            :label="item.title+'('+item.num+')'"
            :name="item.tabName"
            v-for="(item,index) in tagsList"
            :key="index">
            <div>
              <div class="handle_box">
                <el-form ref="formHandle" :model="formHandle" label-width="80px">
                  <el-form-item label="商品分类">
                    <el-select v-model="formHandle.type" placeholder="请选择商品分类" size="small" clearable>
                      <el-option
                        v-for="item in list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      placeholder="请输入商品名称/关键字ID"
                      v-model="formHandle.msg"
                      size="small"
                      style="width: 300px;">
                      <i slot="suffix" class="el-input__icon el-icon-search el-icon" @click="searchKey"></i>
                    </el-input>
                  </el-form-item>
                  <div class="btn-box">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="jumpUrl('/production/add')"><span>添加商品</span></el-button>
                    <el-button type="success" size="small"><span>商品采集</span></el-button>
                    <el-button icon="el-icon-sell" size="small"><span>导出</span></el-button>
                  </div>
                </el-form>
              </div>
              <component :is="item.tabName" :name="tabName"></component>
            </div>
          </Tab-pane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import manage_1 from './manage_1.vue'
  import manage_2 from './manage_2.vue'
  import manage_3 from './manage_3.vue'
  import manage_4 from './manage_4.vue'
  import typeList from '../../../apiData/productionTypeList.js'
  export default {
    name: "p_management",  // 商品管理
    data() {
      return {
        tabName: 'manage_1',
        tagsList: [
          { title: '出售中的商品', num: 59, tabName: 'manage_1' },
          { title: '仓库中的商品', num: 43, tabName: 'manage_2' },
          { title: '已经售罄的商品', num: 16, tabName: 'manage_3' },
          { title: '回收站的商品', num: 19, tabName: 'manage_4' },
        ],
        formHandle: {
          type: '',
          msg: ''
        },
        list: []
      }
    },
    components: {
      manage_1,
      manage_2,
      manage_3,
      manage_4
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.list = typeList
      },
      // 搜索商品名称/关键字
      searchKey() {

      },
      jumpUrl(path) {
        let that = this;
        that.$router.push({
          path: path
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .p_management {
    .container_content{
      padding: 0 20px;
      .handle_box{
        padding-bottom: 10px;
        .el-form-item{
          display: inline-block;
          /*border: 1px solid red;*/
          .el-icon:hover{
            color: #2d8cf0;
            cursor: pointer;
          }
        }
      }
    }
  }
  /deep/ .el-input__inner {
    background: transparent;
    border: 1px solid rgba(102,102,102,0.2);
  }
</style>

